<template>

 <div>
   <div >
     <el-breadcrumb separator="/">
       <!--     <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>-->
       <!--     <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>-->
       <el-breadcrumb-item>休闲娱乐</el-breadcrumb-item>
       <el-breadcrumb-item>自学做菜</el-breadcrumb-item>
     </el-breadcrumb>
   </div>

   <div style="float: left;margin-top: 8px;margin-bottom: 8px">
   </div>
   <div>

     <el-form :inline="true" :model="forObject"  style="margin-top: 15px" class="demo-form-inline">
       <el-form-item label="菜名" style="float: left">
         <el-input v-model="forObject.cpName" placeholder="菜名"></el-input>
       </el-form-item>
       <el-form-item label="" style="float: left">
         <h2>如果列表没有您想做的菜请输入您想要学习做的菜点击查询</h2>
       </el-form-item>
       <el-form-item >
         <el-button type="primary"  @click="_onSearch">查询</el-button>
       </el-form-item>

     </el-form>
   </div>

   <div style="margin-top: 20px">

     <el-table
       :data="getPage"
       border
       height="500"
       style="width: 100%">
       <el-table-column v-for="item in columnName" :key="item.id" :label="item.label" >
         <template slot-scope="scope">
             <span v-if="item.date">
                        {{scope.row[item.prop]?$dateformat(scope.row[item.prop],'yyyy-mm-dd HH:mm:ss'):''}}
                  </span>
           <!--            <span>{{scope.row[item.prop]}}</span>-->
           <span v-else>{{scope.row[item.prop]}}</span>
         </template>
       </el-table-column>
       <el-table-column label="图片">
         　　<template slot-scope="scope">
         　　　　 <span v-if="scope.row.firstimg!=undefined&&''!=scope.row.firstimg">
                      <img :src="scope.row.firstimg" width="80" height="80" class="head_pic"/>
                 </span>
         　　</template>
       </el-table-column>

       <el-table-column
         fixed="right"
         label="操作"
         width="100">
         <template slot-scope="scope">
          <el-button @click="_edit(scope.row)" type="text" size="small">详情</el-button>
         </template>
       </el-table-column>
     </el-table>
     <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
       :current-page="currentPage"
       :page-sizes="[5, 10, 20, 40]"
       :page-size="pageSize"
       layout="total, sizes, prev, pager, next, jumper"
       :total="total">
     </el-pagination>


   </div>
 </div>

</template>

<script>

    export default {

      mounted(){
        this._page();
      },
      components:{
      },
        name: "Home",
        data(){
          return {
            forObject:{
              cpName:undefined
            },
            currentPage:1, //初始页
            pageSize:10,    //    每页的数据
            total:0,    //    每页的数据
            getPage:[],
            columnName:[
              {prop:"cpName",label:"菜名",width:"120",fixed:true},
              {prop:"typeName",label:"类别",width:"120"},
              {prop:"texing",label:"描述",width:"120"},
              {prop:"zuofa",label:"做法",width:"120"},
              {prop:"tishi",label:"提示",width:"120"},
              {prop:"tiaoliao",label:"调料",width:"120"},
              {prop:"yuanliao",label:"原料",width:"120"},
              // {prop:"ctime",label:"日期",width:"120",date:true},

            ],
          }
        },
      methods:{
        handleClick(data){
          console.log(data);
        },

        handleSizeChange(val) {
        this.pageSize=val;
        this._page();
        },
        handleCurrentChange(val) {
         this.currentPage=val;
          this._page();
        },
        _onSearch(){
          console.log('------------------------',this.forObject)
          this._page();
        },
        _page(){
          this.$http.post('/vegetable_menu/page?rows='+this.pageSize+'&page='+this.currentPage,this.forObject).then(res=>{
           let data= res.data.data;
            this.getPage=data.records;
            console.log('----------------data',data)
            console.log('-----------------',data.total)
            this.total=data.total;
           }).catch(err=>{
             console.log(err)
           });
        },

        _edit(row){
          console.log(row);
          window.open(row.url)
        },

        _add(){
          this.$refs.sysUserEditRef._open();
        },


      },
    }
</script>

<style scoped>

</style>
